<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import { ref, onMounted } from "vue";
import { reportlistService } from "@/api/hospital";
const navIndex = ref(0);
const activeclass = "active";
//未归档，state=3
const reportlist1 = ref([
  {
    orderdate: "",
    orderid: "",
    hospital: {
      name: "",
    },
    state: "",
  },
]);
//未归档，state=4
const reportlist2 = ref([
  {
    orderdate: "",
    orderid: "",
    hospital: {
      name: "",
    },
    state: "",
  },
]);
function toReport(orderid) {
  router.push({
    path: "/report",
    query: {
      orderId: orderid,
    },
  });
}
const getreportlist = async () => {
  let result = await reportlistService();
  console.log(result);
  if (result.code == 200) {
    reportlist1.value = result.data.filter((item) => {
      return item.state === 3;
    });
    reportlist2.value = result.data.filter((item) => {
      return item.state === 4;
    });
  }
};

onMounted(async () => {
  await getreportlist();
  //await getOneMl();
});

const changeNav = () => {
  if (navIndex.value == 0) {
    navIndex.value = 1;
  } else {
    navIndex.value = 0;
  }
};
</script>
<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>健康档案</p>
      <div></div>
    </header>
    <div class="top-ban"></div>
    <section>
      <img src="../assets/img/report.png" />
      <nav>
        <div :class="navIndex == 0 ? activeclass : ''" @click="changeNav()">
          未完成
        </div>
        <div :class="navIndex == 1 ? activeclass : ''" @click="changeNav()">
          已完成
        </div>
      </nav>
      <ul>
        <li
          v-for="(item, index) in reportlist1"
          :key="index"
          v-show="navIndex === 0"
          v-loading="reportlist1.length === 0"
        >
          <div class="left">
            <i class="fa fa-file-text-o"></i>
            <div>
              <p>{{ item.orderdate }} 体检报告</p>
              <p>{{ item.hospital.name }}</p>
            </div>
          </div>
          <div class="right">
            <p style="color: grey;font-size: x-small">医生正在处理中，</p>
            <p style="color: grey;font-size: x-small">请耐心等待</p>
          </div>
        </li>
        <li
          v-for="(item, index) in reportlist2"
          :key="index"
          v-show="navIndex === 1"
          v-loading="reportlist2.length === 0"
        >
          <div class="left">
            <i class="fa fa-file-text-o"></i>
            <div>
              <p>{{ item.orderdate }} 体检报告</p>
              <p>{{ item.hospital.name }}</p>
            </div>
          </div>
          <div class="right" @click="toReport(item.orderid)">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
      </ul>
    </section>

    <div class="bottom-ban"></div>
    <Footer> </Footer>
  </div>
</template>

<style scoped>
@import "@/assets/css/reportlist.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
nav {
  width: 100%;
  height: 16vw;
  display: flex;
  background-color: #f9f9f9;

  position: fixed;
  left: 0;
}
nav div {
  flex: 1;
  height: 14vw;
  box-sizing: border-box;

  text-align: center;
  line-height: 14vw;
  font-size: 4.2vw;
  font-weight: 600;
  color: #555;
}

.active {
  border-bottom: solid 2px #137e92;
  color: #137e92;
}
.nav-content-item .item {
  width: 92vw;
  margin: 0 auto;
  margin-top: 3vw;
  margin-bottom: 3vw;
  overflow: hidden;
  border-radius: 3vw;
  background-color: #fff;
}
.nav-content-item .item .title {
  width: 100%;
  height: 10vw;
  background-color: #7bafd7;
  line-height: 10vw;
  box-sizing: border-box;
  padding-left: 4vw;
  font-size: 4.2vw;
  color: #fff;
}

.nav-content-item .item ul {
  width: 100%;
}
</style>
